var name = window.localStorage.getItem('name')
if (name === 'null') {
    //没有用户登录
    $('.loginHuan').html('<a href="javascript:;" class="logina">登录/注册</a> <span>|</span>'
    )

} else {
    //有用户登录
    $('.loginHuan').html('你好，<b style="color:red;">' + name + '</b>欢迎来到网易严选<span>|</span><ul class="info"><li><a class="infoCenter" href="javascript:;">个人中心</a></li><li><a class="changePwd" href="javascript:;">修改密码</a></li><li class="logout" onclick=logout()>注销登录</li></ul>')
    $('.loginHuan').css('position', 'relative')

}
$('.infoCenter').on('click', function () {
    location.href = '../info.html'
})
$('.changePwd').on('click', function () {
    location.href = '../changePwd.html'
})

//注销登录
function logout() {
    layer.confirm('您确定要退出登录吗?', {
        btn: ['确定', '再想想'],
        time: 1000
    }, function () {
        window.localStorage.removeItem('name')
        window.localStorage.removeItem('userInfo')
        layer.msg('请先登录',{
            icon:2,
            time:1000
        },()=>{
            location.href = '../login.html'
        })
    })
}
//登录
$('.logina').on('click', function () {
    location.href = '../login.html'
})

let data = window.localStorage.getItem('data')
/* let name = window.localStorage.getItem('name') */
//本地存储没有数据，跳转列表页
Find()
function Find() {
    if (!data) {
        //本地存储没有数据，跳转列表页
        var str = `
                    <div class="jumbotron">
                            <h1>购物车空空如也！</h1>
                            <p>赶紧去列表页挑选喜欢的商品吧！</p>
                            <p><a class="btn btn-primary btn-lg" href="../xinpin.html" role="button">去列表页</a></p>
                    </div>
                `
        $('.container').html(str)
        return
    }
}

data = JSON.parse(data)
console.log(data);
//从本地存储中筛选出本用户的商品
data = data.filter(item => item.name === name)
console.log(data);
//本地存储中没有当前用户的购物车商品信息
Find1()
function Find1() {
    if (data.length === 0) {
        var str = `
                    <div class="jumbotron">
                            <h1>购物车空空如也！</h1>
                            <p>赶紧去列表页挑选喜欢的商品吧！</p>
                            <p><a class="btn btn-primary btn-lg" href="../xinpin.html" role="button">去列表页</a></p>
                    </div>
                `
        $('.container').html(str)
        return
    }
}

/* 获取新品页数据 */
promiseAjax({
    url: '/api/getMoreNewItem',
    method: 'post',
}).then(res => {
    res = JSON.parse(res)
    console.log(res);
    if (res.code == 200) {
        var newItems = res.data.newItems;
        console.log(newItems);
        //将商品列表与当前用户的data遍历，筛选相同
        var arr = []
        data.forEach(item1 => {
            newItems.forEach(item2 => {
                if (item1.cartGoodsid == item2.id)
                    arr.push(item2)
            })
        })
        console.log(arr);
        //渲染页面
        var str = ''
        arr.forEach(item => {
            var number = data.find(v => { return v.cartGoodsid == item.id }).number
            str += `
                        <tr>
                            <td><input type="checkbox" checked name="selectOne"></td>
                            <td><img src="${item.scenePicUrl}" width=100 height=100 /></td>
                            <td>${item.name}</td>
                            <td>${item.retailPrice}</td>
                            <td data-id="${item.id}">
                                <input type="button" name="reduce" value="-" />  
                                <input type="text" name="number" value="${number}" />  
                                <input type="button" data-number=${item.sellVolume} name="add" value="+" />    
                            </td>
                            <td>${(item.retailPrice * number).toFixed(2)}</td>
                            <td class='remove'>删除</td>
                        </tr>
                    `
        })
        $('tbody').html(str)
        //购物车功能实现
        //1.全选单选
        selectAll()
        //2.加减操作
        addReduce()
        //3.计算总价和总数量
        count()
        //4.清空购物车
        clear()
        //5.删除当前用户的某个商品
        remove()

    }
})

//1.全选单选函数
function selectAll() {
    //全选
    $('[name = "selectAll"]').on('click', function () {
        var bool = $(this).prop('checked')
        $('[name = "selectOne"]').prop('checked', bool)
        $('[name = "selectAll"]').prop('checked', bool)
        count()
    })
    //单选
    var arr = Array.prototype.slice.call($('[name = "selectOne"]'))
    arr.forEach(item => {
        item.onclick = function () {
            //判断是否全选
            var bool = arr.every(v => v.checked)
            //设置全选按钮
            $('[name = "selectAll"]').prop('checked', bool)
            count()
        }
    })
}
//2.加减操作
function addReduce() {
    //减法
    $('[name="reduce"]').on('click', function () {
        var number = $(this).next().val()
        number -= 1
        if (number <= 1) {
            number = 1
        }
        $(this).next().val(number)
        //改变本地存储
        var data = window.localStorage.getItem('data')
        data = JSON.parse(data)
        var obj = data.find(item => item.cartGoodsid == $(this).parent().attr('data-id') && item.name == name)
        obj.number = number
        window.localStorage.setItem('data', JSON.stringify(data))
        //修改小计
        var xiaoji = (number * ($(this).parent().prev().text())).toFixed(2)
        $(this).parent().next().text(xiaoji)
        //调用count函数
        count()
    })

    //加法
    $('[name="add"]').on('click', function () {
        var number = $(this).prev().val() - 0
        number += 1
        if (number >= $(this).attr('data-number')) {
            number = $(this).attr('data-number')
        }
        $(this).prev().val(number)
        //改变本地存储
        var data = window.localStorage.getItem('data')
        data = JSON.parse(data)
        var obj = data.find(item => item.cartGoodsid == $(this).parent().attr('data-id') && item.name == name)
        obj.number = number
        window.localStorage.setItem('data', JSON.stringify(data))
        //修改小计
        var xiaoji = (number * ($(this).parent().prev().text())).toFixed(2)
        $(this).parent().next().text(xiaoji)
        //调用count函数
        count()
    })

    //输入数字
    $('[name="number"]').on('blur', function () {
        var number = $(this).val()-0
        //改变本地存储
        if (number >= $(this).next().attr('data-number')) {
            $(this).val($(this).next().attr('data-number'))
        }
        var data = window.localStorage.getItem('data')
        data = JSON.parse(data)
        var obj = data.find(item => item.cartGoodsid == $(this).parent().attr('data-id') && item.name == name)
        obj.number = number
        window.localStorage.setItem('data', JSON.stringify(data))
        //修改小计
        var xiaoji = (number * ($(this).parent().prev().text())).toFixed(2)
        $(this).parent().next().text(xiaoji)
        //调用count函数
        count()
    })
}
//3.计算总价和总数量
function count() {
    var totalNum = 0;
    var totalPrice = 0;
    var arr = Array.prototype.slice.call($('[name = "selectOne"]'))
    arr.forEach(item => {
        //判断是否全选
        var bool = item.checked
        //设置全选按钮
        if (bool) {
            totalNum += item.parentElement.parentElement.children[4].children[1].value - 0
            totalPrice += item.parentElement.parentElement.children[5].innerText - 0
        }
    })
    $('.totalNum').text(totalNum)
    $('.totalPrice').text(totalPrice.toFixed(2))
}
//4.清空购物车
function clear() {
    $('.clear').on('click', function () {
        layer.confirm('你确定要清空购物车吗？', {
            btn: ["确定", "取消"]
        }, () => {
            var str = `
                <div class="jumbotron">
                    <h1>购物车空空如也！</h1>
                    <p>赶紧去列表页挑选喜欢的商品吧！</p>
                    <p><a class="btn btn-primary btn-lg" href="../xinpin.html" role="button">去列表页</a></p>
                </div>
            `
            // 把str放在页面中
            $('.container').html(str)
            //从本地存储在将属于当前用户的数据删除
            var data = window.localStorage.getItem("data")
            var name = window.localStorage.getItem('name')
            data = JSON.parse(data);
            //筛选出不属于当前用户的数据，重新存入本地
            var arr = data.filter(item => item.name != name)
            window.localStorage.setItem('data', JSON.stringify(arr))
            layer.msg('清空成功', {
                icon: 1,
                time: 1000
            })
        })
    })
}
//5.删除当前用户的某个商品
function remove() {
    $('.remove').on('click', function () {
        layer.confirm('你确定要删除吗？', {
            btn: ["确定", "取消"]
        }, () => {
            //将这个tr从tbody中删除
            $(this).parent().remove()
            var data = localStorage.getItem('data')
            data = JSON.parse(data)
            //从data中筛选出本条数据下标
            var index = data.findIndex(item =>
                item.name == name && item.cartGoodsid == $(this).prev().prev().attr('data-id')
            )
            //根据下标删除数组的一个对象
            data.splice(index, 1)
            var arr = data.filter(item => item.name == name)
            localStorage.setItem('data', JSON.stringify(arr))
            count()
            layer.msg('删除成功', {
                icon: 1,
                time: 1000
            })
            if (arr.length == 0) {
                //购物车空空如也
                var str = `
                    <div class="jumbotron">
                        <h1>购物车空空如也！</h1>
                        <p>赶紧去列表页挑选喜欢的商品吧！</p>
                        <p><a class="btn btn-primary btn-lg" href="../xinpin.html" role="button">去列表页</a></p>
                    </div>
                `
                // 把str放在页面中
                $('.container').html(str)
            }
        })
    })
}